<template>
	<div class="bg-white px-3" style="margin: -20px; margin-top: -1rem; margin-bottom: 0!important;">
		<el-tabs v-model="tabIndex" @tab-click="handleClick">
			<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.name">
				<ButtonSearch ref="ButtonSearchRef" placeholder="要搜索的商品名称" @search="handleSearch">
					<!-- 左边 -->
					<template #left>
						<router-link :to="{ name: 'shop_goods_create' }">
							<el-button type="success" size="mini">发布商品</el-button>
						</router-link>
						<el-button class="ml-2" type="warning" size="mini">恢复商品</el-button>
						<el-button type="danger" size="mini">批量删除</el-button>
						<el-button size="mini">上架</el-button>
						<el-button size="mini">下架</el-button>
						<el-button size="mini">推荐</el-button>
					</template>

					<!-- 高级搜索表单 -->
					<template #form>
						<el-form ref="form" inline :model="form" label-width="80px">
							<el-form-item label="商品名称" class="mb-0">
								<el-input size="mini" v-model="form.name" clearable placeholder="请输入商品名称"></el-input>
							</el-form-item>
							<el-form-item label="商品编号" class="mb-0">
								<el-input size="mini" v-model="form.code" clearable placeholder="请输入商品编号"></el-input>
							</el-form-item>
							<el-form-item label="商品类型" class="mb-0">
								<el-select size="mini" v-model="form.type" clearable placeholder="请选择商品类型">
									<el-option v-for="item in options" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="商品分类" class="mb-0">
								<el-select size="mini" v-model="form.category" clearable placeholder="请选择商品分类">
									<el-option v-for="item in options" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item class="mb-0">
								<el-button type="info" size="mini" @click="handleSearch">搜索</el-button>
								<el-button size="mini" @click="handleClearSearch">清空筛选条件</el-button>
							</el-form-item>
						</el-form>
					</template>
				</ButtonSearch>
			</el-tab-pane>
		</el-tabs>
		<!-- 商品列表 -->
		<!--
		商品
		图片 http://static.yoshop.xany6.com/2018071718294208f086786.jpg
		名称 荣耀 V10全网通 标配版 4GB+64GB 魅丽红 
		时间	 2019-07-17 18:34:14
		分类  手机
		商品类型（普通商品）	
		实际销量（20）
		商品排序（100）
		商品状态（上架）
		总库存（200）
		价格(元)（1000.00）
		-->
		<el-table :data="tableData[tabIndex].list" border class="mt-3" style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="45" align="center">
			</el-table-column>
			<el-table-column prop="title" label="商品信息" width="370">
				<template slot-scope="scope">
					<div class="media">
						<img class="mr-3" style="width:60px; height:60px;" :src="scope.row.cover">
						<div class="media-body">
							<p class="mt-0 mb-0 font-weight">{{ scope.row.title }}</p>
							<p class="mb-0">分类：{{ scope.row.category }}</p>
							<p class="mb-0">时间：{{ scope.row.create_time }}</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="type" align="center" label="商品类型">
			</el-table-column>
			<el-table-column prop="sale_count" align="center" label="实际销量">
			</el-table-column>
			<el-table-column prop="order" align="center" label="商品排序">
			</el-table-column>
			<el-table-column align="center" label="商品状态">
				<template slot-scope="scope">
					<el-button type="success" size="mini" plain>审核通过</el-button>
					<el-button class="ml-0 mt-2" type="danger" size="mini" plain>审核拒绝</el-button>
					<!-- <el-button type="success" size="mini" plain @click="changeStatus(scope.row)">{{
						scope.row.status === 1 ? '上架' : '下架'
					}}</el-button> -->
				</template>
			</el-table-column>
			<el-table-column prop="stock" align="center" label="总库存">
			</el-table-column>
			<el-table-column prop="pprice" align="center" label="价格">
			</el-table-column>
			<el-table-column align="center" label="操作" width="150">
				<template slot-scope="scope">
					<el-button-group>
						<el-button type="primary" size="mini" plain>修改</el-button>
						<el-button type="danger" size="mini" plain @click="handleDelete(scope.$index)">删除</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<div style="height: 60px;"></div>
		<el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white"
			style="bottom: 0; left: 200px; right: 0; z-index: 100;">
			<div style="flex: 1;" class="px-2">
				<el-pagination :current-page="tableData[tabIndex].currentPage" :page-sizes="[100, 200, 300, 400]"
					:page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
				</el-pagination>
			</div>
		</el-footer>
	</div>
</template>

<script>
import ButtonSearch from "@/components/common/ButtonSearch.vue";

export default {
	components: {
		ButtonSearch
	},
	data() {
		return {
			tabIndex: 0,
			tabList: [
				{ name: "审核中" },
				{ name: "出售中" },
				{ name: "已下架" },
				{ name: "库存预警" },
				{ name: "回收站" }
			],
			form: {
				name: null,
				code: null,
				type: null,
				category: null
			},
			options: [{
				value: '选项1',
				label: '黄金糕'
			}, {
				value: '选项2',
				label: '双皮奶'
			}, {
				value: '选项3',
				label: '蚵仔煎'
			}, {
				value: '选项4',
				label: '龙须面'
			}, {
				value: '选项5',
				label: '北京烤鸭'
			}],
			superSearch: false,
			tableData: [],
			multipleSelection: []
		}
	},
	created() {
		this.__getData();
	},
	methods: {
		__getData() {
			for (let i = 0; i < this.tabList.length; i++) {
				this.tableData.push({
					currentPage: 1,
					list: []
				});

				for (let j = 0; j < 20; j++) {
					this.tableData[i].list.push({
						id: j,
						title: '荣耀 V10全网通 标配版 4GB+64GB 魅丽红' + i + '-' + j,
						cover: 'http://static.yoshop.xany6.com/2018071718294208f086786.jpg',
						create_time: '2019-07-17 18:34:14',
						category: "手机",
						type: "普通商品",
						sale_count: 20,
						order: 100,
						status: 1,
						stock: 200,
						pprice: 1000,
						ischeck: 1
						// 0未审核，1通过，2不通过
					});
				}
			}
		},
		// 上下架
		changeStatus(item) {
			item.status = item.status === 1 ? 0 : 1;
		},
		// 删除
		handleDelete(index) {
			this.$confirm('确定删除此条数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.tableData[this.tabIndex].list.splice(index, 1);
			})
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		handleClick(tab, event) {
			this.tabIndex = tab.index
		},
		// 搜索事件
		handleSearch(e = false) {
			// 简单搜索
			if (typeof e === 'string') {
				return console.log("简单搜索");
			}
			// 高级搜索
			console.log("高级搜索");
		},
		// 清空筛选条件
		handleClearSearch() {
			this.form = {
				name: null,
				code: null,
				type: null,
				category: null
			};
			this.superSearch = false;
			this.$refs.ButtonSearchRef[this.tabIndex].closeSuperSearch();
		}
	}
}
</script>

<style>

</style>
